﻿<script>
    /*
    * element日期时间选择组件
    * type参数如果不传，则默认显示至日期
    * type参数如果传有，则显示日期及时间，精确到时分秒
    * */
    export default {
        mounted(){
            
        },
        /*label:标签名称；loc:组件位置，用来判断是否展示今天明天的按钮，传递就显示；type:是否显示时分秒，传递则显示，不传不显示；sendType:传参是什么类型的，有就是时间戳，没有是字符串*/
        props:['label','loc','type','sendType'],
        data(){
            return {
                startTime:'',
                endTime:'',
            }
        },
        methods:{
            //将Date类型转换成当天 00:00:00 和23:59:59
            //startTime和endTime均为Date类型
            //传参type -1表示昨天，0表示今天，1表示其他时间
            formatDate(type){
                let  date1,date2;
                if(this.startTime&&this.endTime){
                   if(type&&type>0){ //针对普通时间
                       date1=this.startTime,date2=this.endTime
                      date1.setTime(date1.getTime())
                      date2.setTime(date2.getTime())
                       if(date1>date2){
                           this.$message.error('结束时间不能早于起始时间')
                           return
                       }
                } else if(!type||type==-1) {  //针对今天昨天
                     let  t= new Date()
                    if(type==-1) //昨天
                        t.setTime(t.getTime() - 24 * 60 * 60 * 1000)
                    else //今天
                        t.setTime(t.getTime())
                       this.startTime=this.endTime=t
                       date1 = date2 =t
                }

                     date1=this.dateFormat(date1)
                     date2=this.dateFormat(date2)

                     date1=date1+" 00:00:00"
                     date2=date2+" 23:59:59"

                     date1=Date.parse(new Date(date1))/1000
                     date2=Date.parse(new Date(date2))/1000

                     return {date1,date2}

                }else{
                    this.$message.error('请补全起始和结束时间')
                    return
                }

    },
            search_date(){

                      let date=this.formatDate(1)
                      if(date)  this.$parent.$emit('search-date',date)
            },
            today() {

                this.startTime=this.endTime=new Date()
                let date=this.formatDate(0)
                if(date) this.$parent.$emit('search-date',date);
            },

            yesterday() {
                this.startTime=this.endTime= new Date();
                let date=this.formatDate(-1)
                if(date)  this.$parent.$emit('search-date',date);
            },

            dateFormat(date,fmt){
                fmt = fmt || "yyyy-MM-dd";
                if(!date) date=new Date()
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
                    "H+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                var week = {
                    "0": "/u65e5",
                    "1": "/u4e00",
                    "2": "/u4e8c",
                    "3": "/u4e09",
                    "4": "/u56db",
                    "5": "/u4e94",
                    "6": "/u516d"
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                }
                if (/(E+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[date.getDay() + ""]);
                }
                for (var k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    }
                }
                return fmt;
            },

            
        },
        components:{

        },

    }
    
</script>


<template>
    <div class="pick-date f-fl f-fix">
        <div class='label f-fl'>{{label}}</div>

        <!-- 开始日期 -->
        <div class="start-date f-fl">
              <el-date-picker  v-model="startTime" :type="type?'datetime':'date'"  :format="type?'yyyy-MM-dd HH-mm-ss':'yyyy-MM-dd'" placeholder="选择开始日期时间"></el-date-picker>
        </div>
         ~
        <!-- 结束日期 -->
        <div class="over-date f-fl">
             <el-date-picker v-model="endTime" :type="type?'datetime':'date'"  :format="type?'yyyy-MM-dd HH-mm-ss':'yyyy-MM-dd'"  placeholder="选择结束日期时间"></el-date-picker>
        </div>

        <span class='search_date' @click='search_date'>查询</span>

        <a  class='search_date' @click="today" v-if="!loc">今天</a>

        <a  class='search_date' @click="yesterday" v-if='!loc'>昨天</a>
        
    </div>
</template>
<style lang="scss" scoped>
    .pick-date {
        width: 650px;
        height: 60px;
        font-size: 14px;
        display:flex;
        align-items:center;
        .label{
            display:inline-block;
            padding-right:10px;
            height: 60px;
            line-height: 60px;
            text-indent: 15px;
        }

        .start-date,.over-date{
            height: 60px;
            .el-input{
                .el-input__prefix{
                    .el-input__icon{
                        line-height: 1;
                    }
                }
            }
            input{
                width:150px;
                height: 60px !important;
                border: 1px solid #DDDDDD;
                border-radius: 2px;
                font-size:14px !important;
            }
        }

        a{
            display:block;
            width: 50px;
            height: 30px;
            border-radius: 2px;
            text-align: center;
            line-height: 30px;
            background: #F5F7FA;
            border: 1px solid #DFE7EB;
            margin-left: 5px;
        }
        .active{
            background: #3494E7;
            border-radius: 2px;
            color: #FFFFFF;
        }
        .search_date{
            display:inline-block;
            width:50px;
            height:30px;
            line-height: 30px;
            text-align:center;
            border: 1px solid #ddd;
            margin-left:5px;
            border-radius:2px;
            cursor:pointer;
        }
        
    }

</style>
     